<template>
  <!--头部-->
  <div class="flex items-center justify-between space-x-2 px-[var(--margin-x)] transition-all duration-[.25s] bg-white">
    <div class="flex items-center space-x-1">
      <h3 class="text-lg font-medium text-slate-700 line-clamp-1 dark:text-navy-50 ml-4">项目名称</h3>
      <n-button quaternary circle type="error" class="ml-0.5 mr-2">
        <template #icon>
          <n-icon>
            <LockClosedIcon/>
          </n-icon>
        </template>
      </n-button>
    </div>
    <label class="relative hidden w-full max-w-[16rem] sm:flex">
      <n-input placeholder="搜索" round clearable>
        <template #prefix>
          <n-icon :component="SearchIcon" />
        </template>
      </n-input>
    </label>
    <!--头像-->
    <div class="flex space-x-1">
      <div class="flex -space-x-2">
        <n-avatar-group :options="options" :size="30" :max="4">
          <template #avatar="{ option: { name, src } }" >
            <n-tooltip>
              <template #trigger>
                <n-avatar :src="src" />
              </template>
              {{ name }}
            </n-tooltip>
          </template>
          <template #rest="{ options: restOptions, rest }">
            <n-dropdown :options="createDropdownOptions(restOptions)" placement="top">
              <n-avatar>+{{ rest }}</n-avatar>
            </n-dropdown>
          </template>
        </n-avatar-group>
      </div>
      <!--头像结束-->
      <!--添加人员按钮-->

      <n-button quaternary circle type="info" class="ml-0.5 mr-2">
        <template #icon>
          <n-icon>
            <PersonAddIcon/>
          </n-icon>
        </template>
      </n-button>

      <div class="my-1 w-px bg-slate-200 dark:bg-navy-500"></div>

      <div class="flex">
        <!--过滤按钮-->
        <n-button quaternary circle class="ml-0.5">
          <template #icon>
            <n-icon>
              <FunnelIcon/>
            </n-icon>
          </template>
        </n-button>

        <!--收藏按钮-->
        <n-button quaternary circle class="ml-0.5">
          <template #icon>
            <n-icon>
              <StarIcon/>
            </n-icon>
          </template>
        </n-button>

        <!--设置按钮-->
        <n-button quaternary circle class="ml-0.5 mr-6">
          <template #icon>
            <n-icon>
              <SettingIcon/>
            </n-icon>
          </template>
        </n-button>

      </div>
    </div>
  </div>
  <!--头部结束-->

<!--  <n-grid-->
<!--      cols="1 s:2 m:3 l:4 xl:4 2xl:4"-->
<!--      class="mt-4 proCard"-->
<!--      responsive="screen"-->
<!--      :x-gap="12"-->
<!--      :y-gap="8"-->
<!--  >-->
<!--    <n-grid-item>-->
      <Draggable
          class="draggable-ul"
          style="margin-top: 16px"
          animation="300"
          group="people"
          :list="demandList"
          itemKey="name"
      >
        <template #item="{ element }">
        <div class="content">
          <div class = "column-head" >
            <div class="column-head-title">
              <p>标题名</p>
              <em>(2)</em>
            </div>
            <div class="column-head-icon">
              <n-icon size="18" color="#000">
                <MoreIcon/>
              </n-icon>

              <n-icon size="20" color="#000" class="ml-3">
                <AddIcon/>
              </n-icon>

            </div>
          </div>

          <Draggable
              class="draggable-ul"
              style="margin-top: 16px"
              animation="300"
              :list="demandList"
              group="people"
              itemKey="name"
          >
            <template #item="{ element }">
              <div class="cursor-move draggable-li shadow-sm">
                <div class="rounded-lg bg-info/10 px-2.5 pb-2 pt-1.5">
                  <div>
                    <div class="flex justify-between">
                      <!--标题-->
                      <p class="font-medium tracking-wide text-slate-600 line-clamp-2 dark:text-navy-100"
                         style="line-height: 1.5;">
                        {{ element.name }}
                      </p>
                      <!--优先级图标-->
                      <n-icon size="20" color="#f000b9">
                        <FlagIcon/>
                      </n-icon>

                    </div>
                    <!--描述-->
                    <p class="mt-px text-xs text-slate-400 dark:text-navy-300" style="line-height: 1.5;">
                      Google Workspace
                    </p>
                    <!--描述结束-->
                  </div>

                  <div class="flex flex-wrap space-x-1" style="line-height: 1.5;">
                    <div style="line-height: 1.5;"
                         class="badge space-x-1 bg-slate-150 py-1 px-1.5 text-slate-800 dark:bg-navy-500 dark:text-navy-100"
                    >
                      <n-icon :component="CalendarIcon"  size="12"/>
                      <!--结束时间-->
                      <span style="line-height: 0.8;"> Jun 05</span>
                    </div>
                  </div>
                  <!--最后一行-->
                  <div class="flex items-end justify-between">
                    <div class="flex flex-wrap -space-x-1.5">
                      <!--成员信息-->
                      <n-avatar-group :options="options" :size="30" :max="3">
                        <template #avatar="{ option: { name, src } }" >
                          <n-tooltip>
                            <!--                            <n-badge dot type="success" :offset="offset">-->
                            <template #trigger>
                              <!--                              <n-badge dot type="success" :offset="offset">-->
                              <n-avatar :src="src" />
                              <!--                              </n-badge>-->
                            </template>
                            <!--                            </n-badge>-->
                            {{ name }}
                          </n-tooltip>
                        </template>
                        <template #rest="{ options: restOptions, rest }">
                          <n-dropdown :options="createDropdownOptions(restOptions)" placement="top">
                            <n-avatar>+{{ rest }}</n-avatar>
                          </n-dropdown>
                        </template>
                      </n-avatar-group>

                    </div>
                    <div class="flex items-center space-x-2 text-xs text-slate-400 dark:text-navy-300">
                      <div class="flex items-center space-x-0.5">
                        <n-icon size="20">
                          <svg
                              xmlns="http://www.w3.org/2000/svg"
                              class="h-3.5 w-3.5"
                              fill="none"
                              viewBox="0 0 24 24"
                              stroke="currentColor">
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
                          </svg>
                        </n-icon>
                        <!--                        <n-icon :component="TagIcon"  size="15"/>-->
                        <span>2</span>
                      </div>
                      <div class="flex items-center space-x-0.5">
                        <n-icon size="20">
                          <svg
                              xmlns="http://www.w3.org/2000/svg"
                              class="h-3.5 w-3.5"
                              fill="none"
                              viewBox="0 0 24 24"
                              stroke="currentColor"
                          >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"
                            />
                          </svg>
                        </n-icon>
                        <!--                        <n-icon :component="ChatboxIcon"  size="15"/>-->
                        <span>6</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </Draggable>
          <div style="margin: 0px 0px 0;background-color:#fff;border-radius: 8px;transition:box-shadow .3s,opacity .3s;position:relative">
            <div style="cursor: pointer;color: #888;margin: 6px;padding: 12px;">
              <n-icon>
                <AddIcon/>
              </n-icon>
              添加任务
            </div>
          </div>

        </div>
        </template>
      </Draggable>
<!--    </n-grid-item>-->

<!--    <n-grid-item>-->
<!--      <NCard-->
<!--          title="开发中"-->
<!--          :segmented="{ content: true, footer: true }"-->
<!--          size="small"-->
<!--          :bordered="false"-->
<!--      >-->
<!--        <template #header-extra>-->
<!--          <n-tag type="info">月</n-tag>-->
<!--        </template>-->
<!--        <div class="content">-->
<!--          <Draggable-->
<!--              class="draggable-ul"-->
<!--              animation="300"-->
<!--              :list="exploitList"-->
<!--              group="people"-->
<!--              itemKey="name"-->
<!--          >-->
<!--            <template #item="{ element }">-->
<!--              <div class="cursor-move draggable-li shadow-sm">-->
<!--                <div class="rounded-lg bg-info/10 px-2.5 pb-2 pt-1.5">-->
<!--                  <div>-->
<!--                    <div class="flex justify-between">-->
<!--                      &lt;!&ndash;标题&ndash;&gt;-->
<!--                      <p class="font-medium tracking-wide text-slate-600 line-clamp-2 dark:text-navy-100" style="line-height: 1;">-->
<!--                        {{ element.name }}-->
<!--                      </p>-->
<!--                      &lt;!&ndash;优先级图标&ndash;&gt;-->
<!--                      <n-icon size="20" color="#f000b9">-->
<!--                        <FlagIcon/>-->
<!--                      </n-icon>-->

<!--                    </div>-->
<!--                    &lt;!&ndash;描述&ndash;&gt;-->
<!--                    <p class="mt-px text-xs text-slate-400 dark:text-navy-300" style="line-height: 1.5;">-->
<!--                      Google Workspace-->
<!--                    </p>-->
<!--                    &lt;!&ndash;描述结束&ndash;&gt;-->
<!--                  </div>-->

<!--                  <div class="flex flex-wrap space-x-1" style="line-height: 1.5;">-->
<!--                    <div style="line-height: 1.5;"-->
<!--                         class="badge space-x-1 bg-slate-150 py-1 px-1.5 text-slate-800 dark:bg-navy-500 dark:text-navy-100"-->
<!--                    >-->
<!--                      <n-icon :component="CalendarIcon"  size="12"/>-->
<!--                      &lt;!&ndash;结束时间&ndash;&gt;-->
<!--                      <span style="line-height: 0.8;"> Jun 05</span>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                  &lt;!&ndash;最后一行&ndash;&gt;-->
<!--                  <div class="mt-3 flex items-end justify-between">-->
<!--                    <div class="flex flex-wrap -space-x-1.5">-->

<!--                      &lt;!&ndash;成员信息&ndash;&gt;-->
<!--                      <n-avatar-group :options="options" :size="30" :max="3">-->
<!--                        <template #avatar="{ option: { name, src } }" >-->
<!--                          <n-tooltip>-->
<!--                            &lt;!&ndash;                            <n-badge dot type="success" :offset="offset">&ndash;&gt;-->
<!--                            <template #trigger>-->
<!--                              &lt;!&ndash;                              <n-badge dot type="success" :offset="offset">&ndash;&gt;-->
<!--                              <n-avatar :src="src" />-->
<!--                              &lt;!&ndash;                              </n-badge>&ndash;&gt;-->
<!--                            </template>-->
<!--                            &lt;!&ndash;                            </n-badge>&ndash;&gt;-->
<!--                            {{ name }}-->
<!--                          </n-tooltip>-->
<!--                        </template>-->
<!--                        <template #rest="{ options: restOptions, rest }">-->
<!--                          <n-dropdown :options="createDropdownOptions(restOptions)" placement="top">-->
<!--                            <n-avatar>+{{ rest }}</n-avatar>-->
<!--                          </n-dropdown>-->
<!--                        </template>-->
<!--                      </n-avatar-group>-->

<!--                    </div>-->
<!--                    <div class="flex items-center space-x-2 text-xs text-slate-400 dark:text-navy-300">-->
<!--                      <div class="flex items-center space-x-0.5">-->
<!--                        <n-icon size="20">-->
<!--                          <svg-->
<!--                              xmlns="http://www.w3.org/2000/svg"-->
<!--                              class="h-3.5 w-3.5"-->
<!--                              fill="none"-->
<!--                              viewBox="0 0 24 24"-->
<!--                              stroke="currentColor">-->
<!--                            <path-->
<!--                                stroke-linecap="round"-->
<!--                                stroke-linejoin="round"-->
<!--                                stroke-width="2"-->
<!--                                d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>-->
<!--                          </svg>-->
<!--                        </n-icon>-->
<!--                        &lt;!&ndash;                        <n-icon :component="TagIcon"  size="15"/>&ndash;&gt;-->
<!--                        <span>2</span>-->
<!--                      </div>-->
<!--                      <div class="flex items-center space-x-0.5">-->
<!--                        <n-icon size="20">-->
<!--                          <svg-->
<!--                              xmlns="http://www.w3.org/2000/svg"-->
<!--                              class="h-3.5 w-3.5"-->
<!--                              fill="none"-->
<!--                              viewBox="0 0 24 24"-->
<!--                              stroke="currentColor"-->
<!--                          >-->
<!--                            <path-->
<!--                                stroke-linecap="round"-->
<!--                                stroke-linejoin="round"-->
<!--                                stroke-width="2"-->
<!--                                d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"-->
<!--                            />-->
<!--                          </svg>-->
<!--                        </n-icon>-->
<!--                        &lt;!&ndash;                        <n-icon :component="ChatboxIcon"  size="15"/>&ndash;&gt;-->
<!--                        <span>6</span>-->
<!--                      </div>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </template>-->
<!--          </Draggable>-->
<!--        </div>-->
<!--      </NCard>-->
<!--    </n-grid-item>-->

<!--    <n-grid-item>-->
<!--      <NCard-->
<!--          title="已完成"-->
<!--          :segmented="{ content: true, footer: true }"-->
<!--          size="small"-->
<!--          :bordered="false"-->
<!--      >-->
<!--        <template #header-extra>-->
<!--          <n-tag type="info">月</n-tag>-->
<!--        </template>-->


<!--        <div class="content">-->
<!--          <Draggable-->
<!--              class="draggable-ul"-->
<!--              animation="300"-->
<!--              :list="completeList"-->
<!--              group="people"-->
<!--              itemKey="name"-->
<!--          >-->
<!--            <template #item="{ element }">-->
<!--              <div class="cursor-move draggable-li shadow-sm">-->
<!--                <div class="rounded-lg bg-info/10 px-2.5 pb-2 pt-1.5">-->
<!--                  <div>-->
<!--                    <div class="flex justify-between">-->
<!--                      &lt;!&ndash;标题&ndash;&gt;-->
<!--                      <p class="font-medium tracking-wide text-slate-600 line-clamp-2 dark:text-navy-100"-->
<!--                         style="line-height: 1;">-->
<!--                        {{ element.name }}-->
<!--                      </p>-->
<!--                      &lt;!&ndash;优先级图标&ndash;&gt;-->
<!--                      <n-icon size="20" color="#f000b9">-->
<!--                        <FlagIcon/>-->
<!--                      </n-icon>-->

<!--                    </div>-->
<!--                    &lt;!&ndash;描述&ndash;&gt;-->
<!--                    <p class="mt-px text-xs text-slate-400 dark:text-navy-300" style="line-height: 0.8;">-->
<!--                      Google Workspace-->
<!--                    </p>-->
<!--                    &lt;!&ndash;描述结束&ndash;&gt;-->
<!--                  </div>-->

<!--                  <div class="flex flex-wrap space-x-1" style="line-height: 0.8;">-->
<!--                    <div style="line-height: 0.8;"-->
<!--                         class="badge space-x-1 bg-slate-150 py-1 px-1.5 text-slate-800 dark:bg-navy-500 dark:text-navy-100"-->
<!--                    >-->
<!--                      <n-icon :component="CalendarIcon"  size="12"/>-->
<!--                      &lt;!&ndash;结束时间&ndash;&gt;-->
<!--                      <span style="line-height: 0.8;"> Jun 05</span>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                  &lt;!&ndash;最后一行&ndash;&gt;-->
<!--                  <div class="mt-3 flex items-end justify-between">-->
<!--                    <div class="flex flex-wrap -space-x-1.5">-->

<!--                      &lt;!&ndash;成员信息&ndash;&gt;-->
<!--                      <n-avatar-group :options="options" :size="30" :max="3">-->
<!--                        <template #avatar="{ option: { name, src } }" >-->
<!--                          <n-tooltip>-->
<!--                            &lt;!&ndash;                            <n-badge dot type="success" :offset="offset">&ndash;&gt;-->
<!--                            <template #trigger>-->
<!--                              &lt;!&ndash;                              <n-badge dot type="success" :offset="offset">&ndash;&gt;-->
<!--                              <n-avatar :src="src" />-->
<!--                              &lt;!&ndash;                              </n-badge>&ndash;&gt;-->
<!--                            </template>-->
<!--                            &lt;!&ndash;                            </n-badge>&ndash;&gt;-->
<!--                            {{ name }}-->
<!--                          </n-tooltip>-->
<!--                        </template>-->
<!--                        <template #rest="{ options: restOptions, rest }">-->
<!--                          <n-dropdown :options="createDropdownOptions(restOptions)" placement="top">-->
<!--                            <n-avatar>+{{ rest }}</n-avatar>-->
<!--                          </n-dropdown>-->
<!--                        </template>-->
<!--                      </n-avatar-group>-->

<!--                    </div>-->
<!--                    <div class="flex items-center space-x-2 text-xs text-slate-400 dark:text-navy-300">-->
<!--                      <div class="flex items-center space-x-0.5">-->
<!--                        <n-icon size="20">-->
<!--                          <svg-->
<!--                              xmlns="http://www.w3.org/2000/svg"-->
<!--                              class="h-3.5 w-3.5"-->
<!--                              fill="none"-->
<!--                              viewBox="0 0 24 24"-->
<!--                              stroke="currentColor">-->
<!--                            <path-->
<!--                                stroke-linecap="round"-->
<!--                                stroke-linejoin="round"-->
<!--                                stroke-width="2"-->
<!--                                d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>-->
<!--                          </svg>-->
<!--                        </n-icon>-->
<!--                        &lt;!&ndash;                        <n-icon :component="TagIcon"  size="15"/>&ndash;&gt;-->
<!--                        <span>2</span>-->
<!--                      </div>-->
<!--                      <div class="flex items-center space-x-0.5">-->
<!--                        <n-icon size="20">-->
<!--                          <svg-->
<!--                              xmlns="http://www.w3.org/2000/svg"-->
<!--                              class="h-3.5 w-3.5"-->
<!--                              fill="none"-->
<!--                              viewBox="0 0 24 24"-->
<!--                              stroke="currentColor"-->
<!--                          >-->
<!--                            <path-->
<!--                                stroke-linecap="round"-->
<!--                                stroke-linejoin="round"-->
<!--                                stroke-width="2"-->
<!--                                d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"-->
<!--                            />-->
<!--                          </svg>-->
<!--                        </n-icon>-->
<!--                        &lt;!&ndash;                        <n-icon :component="ChatboxIcon"  size="15"/>&ndash;&gt;-->
<!--                        <span>6</span>-->
<!--                      </div>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </template>-->
<!--          </Draggable>-->
<!--        </div>-->
<!--      </NCard>-->
<!--    </n-grid-item>-->

<!--    <n-grid-item>-->
<!--      <NCard-->
<!--          title="已验收"-->
<!--          :segmented="{ content: true, footer: true }"-->
<!--          size="small"-->
<!--          :bordered="false"-->
<!--      >-->
<!--        <template #header-extra>-->
<!--          <n-tag type="info">月</n-tag>-->
<!--        </template>-->
<!--        <div class="content">-->
<!--          <Draggable-->
<!--              class="draggable-ul"-->
<!--              animation="300"-->
<!--              :list="approvedList"-->
<!--              group="people"-->
<!--              itemKey="name"-->
<!--          >-->
<!--            <template #item="{ element }">-->
<!--              <div class="cursor-move draggable-li shadow-sm">-->
<!--                <div class="rounded-lg bg-info/10 px-2.5 pb-2 pt-1.5">-->
<!--                  <div>-->
<!--                    <div class="flex justify-between">-->
<!--                      &lt;!&ndash;标题&ndash;&gt;-->
<!--                      <p class="font-medium tracking-wide text-slate-600 line-clamp-2 dark:text-navy-100"-->
<!--                         style="line-height: 1;">-->
<!--                        {{ element.name }}-->
<!--                      </p>-->
<!--                      &lt;!&ndash;优先级图标&ndash;&gt;-->
<!--                      <n-icon size="20" color="#f000b9">-->
<!--                        <FlagIcon/>-->
<!--                      </n-icon>-->

<!--                    </div>-->
<!--                    &lt;!&ndash;描述&ndash;&gt;-->
<!--                    <p class="mt-px text-xs text-slate-400 dark:text-navy-300" style="line-height: 0.8;">-->
<!--                      Google Workspace-->
<!--                    </p>-->
<!--                    &lt;!&ndash;描述结束&ndash;&gt;-->
<!--                  </div>-->

<!--                  <div class="flex flex-wrap space-x-1" style="line-height: 0.8;">-->
<!--                    <div style="line-height: 0.8;"-->
<!--                         class="badge space-x-1 bg-slate-150 py-1 px-1.5 text-slate-800 dark:bg-navy-500 dark:text-navy-100"-->
<!--                    >-->
<!--                      <n-icon :component="CalendarIcon"  size="12"/>-->
<!--                      &lt;!&ndash;结束时间&ndash;&gt;-->
<!--                      <span style="line-height: 0.8;"> Jun 05</span>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                  &lt;!&ndash;最后一行&ndash;&gt;-->
<!--                  <div class="mt-3 flex items-end justify-between">-->
<!--                    <div class="flex flex-wrap -space-x-1.5">-->

<!--                      &lt;!&ndash;成员信息&ndash;&gt;-->
<!--                      <n-avatar-group :options="options" :size="30" :max="3">-->
<!--                        <template #avatar="{ option: { name, src } }" >-->
<!--                          <n-tooltip>-->
<!--                            &lt;!&ndash;                            <n-badge dot type="success" :offset="offset">&ndash;&gt;-->
<!--                            <template #trigger>-->
<!--                              &lt;!&ndash;                              <n-badge dot type="success" :offset="offset">&ndash;&gt;-->
<!--                              <n-avatar :src="src" />-->
<!--                              &lt;!&ndash;                              </n-badge>&ndash;&gt;-->
<!--                            </template>-->
<!--                            &lt;!&ndash;                            </n-badge>&ndash;&gt;-->
<!--                            {{ name }}-->
<!--                          </n-tooltip>-->
<!--                        </template>-->
<!--                        <template #rest="{ options: restOptions, rest }">-->
<!--                          <n-dropdown :options="createDropdownOptions(restOptions)" placement="top">-->
<!--                            <n-avatar>+{{ rest }}</n-avatar>-->
<!--                          </n-dropdown>-->
<!--                        </template>-->
<!--                      </n-avatar-group>-->

<!--                    </div>-->
<!--                    <div class="flex items-center space-x-2 text-xs text-slate-400 dark:text-navy-300">-->
<!--                      <div class="flex items-center space-x-0.5">-->
<!--                        <n-icon size="20">-->
<!--                          <svg-->
<!--                              xmlns="http://www.w3.org/2000/svg"-->
<!--                              class="h-3.5 w-3.5"-->
<!--                              fill="none"-->
<!--                              viewBox="0 0 24 24"-->
<!--                              stroke="currentColor">-->
<!--                            <path-->
<!--                                stroke-linecap="round"-->
<!--                                stroke-linejoin="round"-->
<!--                                stroke-width="2"-->
<!--                                d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>-->
<!--                          </svg>-->
<!--                        </n-icon>-->
<!--                        &lt;!&ndash;                        <n-icon :component="TagIcon"  size="15"/>&ndash;&gt;-->
<!--                        <span>2</span>-->
<!--                      </div>-->
<!--                      <div class="flex items-center space-x-0.5">-->
<!--                        <n-icon size="20">-->
<!--                          <svg-->
<!--                              xmlns="http://www.w3.org/2000/svg"-->
<!--                              class="h-3.5 w-3.5"-->
<!--                              fill="none"-->
<!--                              viewBox="0 0 24 24"-->
<!--                              stroke="currentColor"-->
<!--                          >-->
<!--                            <path-->
<!--                                stroke-linecap="round"-->
<!--                                stroke-linejoin="round"-->
<!--                                stroke-width="2"-->
<!--                                d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"-->
<!--                            />-->
<!--                          </svg>-->
<!--                        </n-icon>-->
<!--                        &lt;!&ndash;                        <n-icon :component="ChatboxIcon"  size="15"/>&ndash;&gt;-->
<!--                        <span>6</span>-->
<!--                      </div>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </template>-->
<!--          </Draggable>-->
<!--        </div>-->
<!--      </NCard>-->
<!--    </n-grid-item>-->
<!--  </n-grid>-->

</template>
<script lang="ts" setup>
const tabTypeActive = "column"
const columnList =  reactive ([
  {
    "id": 17024,
    "parent_id": 0,
    "project_id": 232,
    "column_id": 641,
    "dialog_id": 14759,
    "flow_item_id": 641,
    "flow_item_name": "test|待测试",
    "name": "用户端-订单",
    "color": "",
    "desc": "订单中，已取消订单，显示取消时间 ，替换原来的支付时间位置",
    "start_at": null,
    "end_at": null,
    "archived_at": null,
    "archived_userid": 0,
    "archived_follow": 0,
    "complete_at": null,
    "userid": 52,
    "visibility": 1,
    "p_level": 1,
    "p_name": "重要且紧急",
    "p_color": "#ED4014",
    "sort": -84,
    "loop": "",
    "loop_at": null,
    "created_at": "2023-12-21 12:00:13",
    "updated_at": "2023-12-22 10:54:09",
    "deleted_at": null,
    "deleted_userid": 0,
    "owner": 1,
    "assist": 1,
    "today": false,
    "overdue": false,
    "task_user": [
      {
        "id": 69762,
        "project_id": 232,
        "task_id": 17024,
        "task_pid": 17024,
        "userid": 4,
        "owner": 1,
        "created_at": "2023-12-21 18:20:20",
        "updated_at": "2023-12-21 18:20:20"
      },
      {
        "id": 69761,
        "project_id": 232,
        "task_id": 17024,
        "task_pid": 17024,
        "userid": 42,
        "owner": 1,
        "created_at": "2023-12-21 18:20:20",
        "updated_at": "2023-12-21 18:20:20"
      },
      {
        "id": 69760,
        "project_id": 232,
        "task_id": 17024,
        "task_pid": 17024,
        "userid": 97,
        "owner": 1,
        "created_at": "2023-12-21 18:20:20",
        "updated_at": "2023-12-21 18:20:20"
      },
      {
        "id": 69627,
        "project_id": 232,
        "task_id": 17024,
        "task_pid": 17024,
        "userid": 110,
        "owner": 1,
        "created_at": "2023-12-21 12:00:13",
        "updated_at": "2023-12-21 12:00:13"
      },
      {
        "id": 69626,
        "project_id": 232,
        "task_id": 17024,
        "task_pid": 17024,
        "userid": 52,
        "owner": 1,
        "created_at": "2023-12-21 12:00:13",
        "updated_at": "2023-12-21 12:00:13"
      }
    ],
    "task_tag": [],
    "file_num": 0,
    "msg_num": 6,
    "sub_num": 0,
    "sub_complete": 0,
    "percent": 0
  },
  {
    "id": 17003,
    "parent_id": 0,
    "project_id": 232,
    "column_id": 641,
    "dialog_id": 14717,
    "flow_item_id": 639,
    "flow_item_name": "start|待处理",
    "name": "部署发布",
    "color": "",
    "desc": "本期变更的环境变量填在这里\n\n仓库：git@github.com:innet8/diylink-admin.git分支：develop# 待支付订单自动取消时间（单位：秒），如12小时，值：43200ORDER_AUTO_CANCEL_DURATION=43200# 待支付订单自动取消前提...",
    "start_at": null,
    "end_at": null,
    "archived_at": null,
    "archived_userid": 0,
    "archived_follow": 0,
    "complete_at": null,
    "userid": 52,
    "visibility": 1,
    "p_level": 1,
    "p_name": "重要且紧急",
    "p_color": "#ED4014",
    "sort": -68,
    "loop": "",
    "loop_at": null,
    "created_at": "2023-12-21 09:20:40",
    "updated_at": "2023-12-22 10:38:53",
    "deleted_at": null,
    "deleted_userid": 0,
    "owner": 1,
    "assist": 1,
    "today": false,
    "overdue": false,
    "task_user": [
      {
        "id": 69772,
        "project_id": 232,
        "task_id": 17003,
        "task_pid": 17003,
        "userid": 97,
        "owner": 1,
        "created_at": "2023-12-22 10:34:36",
        "updated_at": "2023-12-22 10:34:36"
      },
      {
        "id": 69552,
        "project_id": 232,
        "task_id": 17003,
        "task_pid": 17003,
        "userid": 30,
        "owner": 1,
        "created_at": "2023-12-21 09:20:41",
        "updated_at": "2023-12-21 09:20:41"
      },
      {
        "id": 69551,
        "project_id": 232,
        "task_id": 17003,
        "task_pid": 17003,
        "userid": 98,
        "owner": 1,
        "created_at": "2023-12-21 09:20:41",
        "updated_at": "2023-12-21 09:20:41"
      },
      {
        "id": 69550,
        "project_id": 232,
        "task_id": 17003,
        "task_pid": 17003,
        "userid": 32,
        "owner": 1,
        "created_at": "2023-12-21 09:20:41",
        "updated_at": "2023-12-21 09:20:41"
      },
      {
        "id": 69549,
        "project_id": 232,
        "task_id": 17003,
        "task_pid": 17003,
        "userid": 19,
        "owner": 1,
        "created_at": "2023-12-21 09:20:41",
        "updated_at": "2023-12-21 09:20:41"
      },
      {
        "id": 69548,
        "project_id": 232,
        "task_id": 17003,
        "task_pid": 17003,
        "userid": 52,
        "owner": 1,
        "created_at": "2023-12-21 09:20:41",
        "updated_at": "2023-12-21 09:20:41"
      }
    ],
    "task_tag": [],
    "file_num": 0,
    "msg_num": 15,
    "sub_num": 0,
    "sub_complete": 0,
    "percent": 0
  },
  {
    "id": 16767,
    "parent_id": 0,
    "project_id": 232,
    "column_id": 630,
    "dialog_id": 14586,
    "flow_item_id": 641,
    "flow_item_name": "test|待测试",
    "name": "谷歌云推广页12.11",
    "color": "",
    "desc": "一、总体要求：google云永久8折 做一个推广页面。说明通过跟google 云深度合作，开google 原生虚拟机，采用gcp带宽。打折。。\n二、广告业要素：\n标题：一句话说明着陆页面提供的价值\n副标题：通常用来简单介绍产品和...",
    "start_at": "2023-12-11 09:00:00",
    "end_at": "2023-12-22 18:00:00",
    "archived_at": null,
    "archived_userid": 0,
    "archived_follow": 0,
    "complete_at": null,
    "userid": 4,
    "visibility": 1,
    "p_level": 1,
    "p_name": "重要且紧急",
    "p_color": "#ED4014",
    "sort": 6,
    "loop": "",
    "loop_at": null,
    "created_at": "2023-12-11 19:21:08",
    "updated_at": "2023-12-22 10:31:51",
    "deleted_at": null,
    "deleted_userid": 0,
    "owner": 1,
    "assist": 1,
    "today": true,
    "overdue": false,
    "task_user": [
      {
        "id": 69771,
        "project_id": 232,
        "task_id": 16767,
        "task_pid": 16767,
        "userid": 42,
        "owner": 1,
        "created_at": "2023-12-22 10:31:51",
        "updated_at": "2023-12-22 10:31:51"
      },
      {
        "id": 69770,
        "project_id": 232,
        "task_id": 16767,
        "task_pid": 16767,
        "userid": 97,
        "owner": 1,
        "created_at": "2023-12-22 10:31:51",
        "updated_at": "2023-12-22 10:31:51"
      },
      {
        "id": 69571,
        "project_id": 232,
        "task_id": 16767,
        "task_pid": 16767,
        "userid": 78,
        "owner": 1,
        "created_at": "2023-12-21 10:25:47",
        "updated_at": "2023-12-21 10:25:47"
      },
      {
        "id": 69567,
        "project_id": 232,
        "task_id": 16767,
        "task_pid": 16767,
        "userid": 52,
        "owner": 1,
        "created_at": "2023-12-21 10:19:56",
        "updated_at": "2023-12-21 10:19:56"
      },
      {
        "id": 68963,
        "project_id": 232,
        "task_id": 16767,
        "task_pid": 16767,
        "userid": 25,
        "owner": 1,
        "created_at": "2023-12-18 11:03:22",
        "updated_at": "2023-12-18 11:03:22"
      },
      {
        "id": 68156,
        "project_id": 232,
        "task_id": 16767,
        "task_pid": 16767,
        "userid": 23,
        "owner": 1,
        "created_at": "2023-12-12 10:35:43",
        "updated_at": "2023-12-12 10:35:43"
      },
      {
        "id": 68123,
        "project_id": 232,
        "task_id": 16767,
        "task_pid": 16767,
        "userid": 93,
        "owner": 1,
        "created_at": "2023-12-11 19:22:15",
        "updated_at": "2023-12-11 19:22:15"
      },
      {
        "id": 68122,
        "project_id": 232,
        "task_id": 16767,
        "task_pid": 16767,
        "userid": 4,
        "owner": 1,
        "created_at": "2023-12-11 19:21:08",
        "updated_at": "2023-12-11 19:21:08"
      },
      {
        "id": 68736,
        "project_id": 232,
        "task_id": 16767,
        "task_pid": 16767,
        "userid": 3,
        "owner": 0,
        "created_at": "2023-12-14 18:20:45",
        "updated_at": "2023-12-14 18:20:45"
      }
    ],
    "task_tag": [],
    "file_num": 0,
    "msg_num": 164,
    "sub_num": 0,
    "sub_complete": 0,
    "percent": 0
  }])
import Draggable from 'vuedraggable';
import {
  StarOutline as StarIcon,
  SettingsOutline as SettingIcon,
  FunnelOutline as FunnelIcon,
  PersonAddOutline as PersonAddIcon,
  LockClosedOutline as LockClosedIcon,
  Flag as FlagIcon,
  SearchOutline as SearchIcon,
  CalendarClearOutline as CalendarIcon,
  AddSharp as AddIcon,
  EllipsisHorizontalSharp as MoreIcon
} from '@vicons/ionicons5'

const options = reactive([
  {
    name: '张三',
    src: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg'
  },
  {
    name: '李四',
    src: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'
  },
  {
    name: '王五',
    src: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg'
  },
  {
    name: '赵六',
    src: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'
  },
  {
    name: '七仔',
    src: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg'
  },
  {
    name: '八嘎',
    src: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg'
  }
]);

const offset = reactive  ([-7, 29])
const createDropdownOptions = (options: any[]) => {
  options.map((option)=>({
    key:option.name,
    label: option.name
  }))
}

const demandList = reactive([
  {name: '预约表单页面，能填写预约相关信息', id: 1},
  {name: '促销活动页面，包含促销广告展示', id: 2},
  {name: '商品列表，需要一个到货提醒功能', id: 3},
  {name: '商品需要一个评价功能', id: 4},
  {name: '商品图片需要提供放大镜', id: 5},
  {name: '订单需要提供删除到回收站', id: 6},
  {name: '用户头像上传，需要支持裁剪', id: 7},
  {name: '据说Vue3.2发布了，setup啥时候支持？', id: 8},
]);

const exploitList = reactive([{name: '商品图片需要提供放大镜', id: 5}]);
const completeList = reactive([{name: '商品图片需要提供放大镜', id: 5}]);
const approvedList = reactive([{name: '商品图片需要提供放大镜', id: 5}]);


</script>
<style scoped lang="stylus">

.draggable-ul {
  width: 100%;
  overflow: hidden;
  margin-top: 0px;

  .draggable-li {
    padding: 1px 1px;
    border-radius: .5rem;
    color: #64748b;
    display: flex;
    flex-direction: column;
    min-width: 1px;
    overflow-wrap: break-word;
    position: relative;
    background: #fff;
    border-bottom: 1px solid #efeff5;
  }
  .draggable-li:nth-child(n+2) {
    margin-top: 16px; /* 上边距 */
    margin-bottom: 16px; /* 下边距 */
  }
}
.column-head{
  display: flex;
  align-items: center;
  padding: 7px 10px;
  margin: 0 0px;
  background-color: #dadce0;
  border-radius: 4px;
}
.column-head-title{
  flex: 1;
  width: 0;
  display: flex;
  align-items: center;
  font-weight: 500;
}
.column-head-icon {
  display: flex;
  align-items: center;
  margin-left: 16px;
}
.content{
  flex-shrink: 0;
  list-style: none;
  width: 300px;
  height: 100%;
  display: flex;
  flex-direction: column;
}




</style>

